<template>
    <div style="z-index: -1;">
        <Particles id="tsparticles" :options="options" />
    </div>
</template>

<script>

export default {
    name: "backgroundComponents",
    setup() {
        const options = {
            background: {
                color: {
                    value: '#0d47a1',
                },
                image: "https://i0.hdslb.com/bfs/banner/86cbc1d215c1bdf285847bc506acb3855e857f8c.png@800w_512h_!web-home-carousel-cover.avif",
                opacity: 0,

            },
            fullScreen: {
                enable: true,
                zIndex: -1,
            },
            fpsLimit: 120,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: 'push',
                    },
                    onHover: {
                        enable: true,
                        mode: 'repulse',
                    },
                    resize: true,
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40,
                    },
                    push: {
                        quantity: 4,
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4,
                    },
                },
            },
            particles: {
                color: {
                    value: '#ffffff',
                },
                links: {
                    color: '#ffffff',
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1,
                },
                move: {
                    direction: 'none',
                    enable: true,
                    outMode: 'bounce',
                    random: false,
                    speed: 6,
                    straight: false,
                },
                number: {
                    density: {
                        enable: true,
                        area: 800,
                    },
                    value: 80,
                },
                opacity: {
                    value: 0.5,
                },
                shape: {
                    type: 'circle',
                },
                size: {
                    random: true,
                    value: 5,
                },
            },
            detectRetina: true,
        }
        return {
            options,
        }
    }
}
</script>

<style scoped></style>